<template>
  <div class="good">
    <div class="menu-wrapper" ref="menuWrapper">
      <ul>
        <li v-for="(item, index) in goodList" :key='index' class="menu-item border-1px" :class="{'current':currentIndex === index}"
            @click="selectMenu(index, $event)">
          <span class="text" :class="'kind'+item.id">
            <!-- <span v-show="item.type>0" class=" icon" :class="'kind'+item.id"></span> -->
            {{item.name}}
          </span>
        </li>
        <li v-if='!goodList.length' class="menu-item border-1px">
          <span class="text">{{Text.noKinds}}</span>
        </li>
      </ul>
    </div>
    <div class="goods-wrapper" ref="goodWrapper">
      <!-- <mt-index-list :show-indicator='false'>
        <li v-if='!goodList.length' class="no-good">
          {{Text.noGoods}}
        </li>
        <mt-index-section  v-for="(item, index) in goodList" class="good-list good-list-hook" v-bind:key='index' :index="item.name">
          <li v-if='!item.goods.length' class="no-good-in-kind">
            {{Text.noGoodsInKind}}
          </li>
          <mt-cell title="" v-for="(good, index) in item.goods" :key="index" class="good-item" @click="selectGood(good, $event)">
            <div class="icon">
              <img :src="good.picurl" alt="" width="57">
            </div>
            <div class="content">
              <h2 class="name">{{good.name}}</h2>
              <div class="price">
                <span class="now">{{good.price}}</span>
              </div>
              <div class="cartControl-wrapper">
                <cartControl :goodId='good.id'></cartControl>
              </div>
            </div>
          </mt-cell>
        </mt-index-section>
      </mt-index-list> -->
      <ul>
        <li v-if='!goodList.length' class="no-good">
          {{Text.noGoods}}
        </li>
        <li v-for="(item, index) in goodList" class="good-list good-list-hook" v-bind:key='index'>
          <h1 class="title">{{item.name}}</h1>
          <ul>
            <li v-if='!item.goods.length' class="no-good-in-kind">
              {{Text.noGoodsInKind}}
            </li>
            <li v-for="(good, index) in item.goods" :key="index" class="good-item" @click="selectGood(good, $event)">
              <div class="icon">
                <img :src="good.picurl" alt="" width="57">
              </div>
              <div class="content">
                <h2 class="name">{{good.name}}</h2>
                
                <div class="price">
                  <span class="now">{{good.price}}</span>
                </div>
                <div class="cartControl-wrapper">
                  <cartControl :goodId='good.id'></cartControl>
                </div>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import cartControl from '../cartControl/cartControl'
import BScroll from 'better-scroll'

export default {
  name: 'goods',
  props: {
    // kinds: {
    //   type: Array
    // },
    goodList: {
      type: Array
    },
    goods: {}
  },
  data() {
    return {
      Text: {
        noKinds: this.$t('goods.noKinds'),
        noGoods: this.$t('goods.noGoods'),
        noGoodsInKind: this.$t('goods.noGoodsInKind')
      },
      currentIndex: 0,
      listHeight: [],
      scrolly: 0,
      // order: {}
    }
  },
  computed: {
    order() {
      return this.$store.state.order
    }
  },
  mounted() {
    this._initScroll()
    // this.getOrderFromStore()
  },
  created() {},
  methods: {
    // getOrderFromStore() {
    //   this.order = this.$store.state.order
    // },
    _initScroll() {
      this.menuScroll = new BScroll(this.$refs.menuWrapper, { click: true })
      this.goodScroll = new BScroll(this.$refs.goodWrapper, {
        probeType: 3,
        click: true
      })
    },
    selectMenu(index, event) {
      if (!event._constructed) {
        return
      }
      console.log(index)
      this.currentIndex = index
      let goodList = this.$refs.goodWrapper.getElementsByClassName('good-list-hook')
      let el = goodList[index]
      this.goodScroll.scrollToElement(el, 300)
    },
    selectGood(good, event) {
      console.log(event)
      if(!event.target.classList.contains('icon')){
        this.$emit('showGoodDetail', good)
      }
    },
    // type指示是增加还是减少
  },
  components: {
    cartControl
  }
}
</script>

<style lang="less" scoped>
@import url('./good.less');
</style>


